<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" type="text/css" href="css/public.css"/>
	<link rel="stylesheet" href="css/zhuche.css" />
	<script src="js/jquery.min.js"></script>
	<title>更多商品</title>
</head>
<body>

	<div class="wrap">
		<div class="header">
			<div class="header-l">
				<a class="fanh" href="javascript:history.back(-1)"><img src="images/top_arrowleft.png" alt="" /></a>
			</div>
			<p>推荐</p>
		</div>
		
		
		<div class="choose">
			<div id="shop" class="choose-l active">
				<p>店铺</p>
				<img src="images/jt.png" alt="" />
			</div>
			<div id="zh" class="choose-r">
				<p>综合</p>
				<img src="images/jt.png" alt="" />
			</div>
		</div>
		
		<div id="show" class="shoose">
			<ul>
				<li><a href="javascript:;">朵丽斯官方旗舰店</a></li>
				<li><a href="javascript:;">黄金商铺，老凤祥</a></li>
				<li><a href="javascript:;">oppo官方专卖店</a></li>
				<li><a href="javascript:;">华为手机全国连锁店</a></li>
			</ul>
		</div>
		
			
			<div class="matter"><!--商品部分-->
					<div id="tes"></div><!--遮罩层-->
				<ul>
					<li>
						<div class="zong">
							<a href="">
								<div class="tu">
									<img src="images/s1.jpg" alt="" />
								</div>
								<p id="name">2017新品眼镜框小框眼镜</p>
								<span>会员价<i>￥</i>78.00</span>
							</a>
						</div>
					</li>

					<li>
						<div class="zong">
							<a href="">
								<div class="tu">
									<img src="images/22.png" alt="" />
								</div>
								<p id="name">2017新品眼镜框小框眼镜</p>
								<span>会员价<i>￥</i>78.00</span>
							</a>
						</div>
					</li>
					
						<li>
						<div class="zong">
							<a href="">
								<div class="tu">
									<img src="images/22.png" alt="" />
								</div>
								<p id="name">2017新品眼镜框小框眼镜</p>
								<span>会员价<i>￥</i>78.00</span>
							</a>
						</div>
					</li>
					
						<li>
						<div class="zong">
							<a href="">
								<div class="tu">
									<img src="images/22.png" alt="" />
								</div>
								<p id="name">2017新品眼镜框小框眼镜</p>
								<span>会员价<i>￥</i>78.00</span>
							</a>
						</div>
					</li>
					
						<li>
						<div class="zong">
							<a href="">
								<div class="tu">
									<img src="images/22.png" alt="" />
								</div>
								<p id="name">2017新品眼镜框小框眼镜</p>
								<span>会员价<i>￥</i>78.00</span>
							</a>
						</div>
					</li>

				</ul>
			</div><!--商品部分结束-->
		
	</div>
	
	<script>
		
		$(function(){
			
				$("#shop").click(function(){
				$(this).addClass("active").siblings().removeClass("active");//加一个红色下划线
				$('#tes').show();//遮罩显示
				$('#show').show();//点击按钮的时候，框显示
				
			})
				
				$("#zh").click(function(){
				$(this).addClass("active").siblings().removeClass("active");
				$('#show').show();
				$('#tes').show();//遮罩显示
			})
				
				/*鼠标点击非按钮时，框消失*/
				$(document).bind('click',function(e){ //在页面其他地方绑定一个点击事件
     				var e = e || window.event; //浏览器兼容性 
					var elem = e.target || e.srcElement; 
					while (elem) { //循环判断至跟节点，防止点击的是div子元素 
					if (elem.id && elem.id=='test') { 
						return; 
					} 
						elem = elem.parentNode; 
					} 
					$('#test').css('display','none'); //点击的不是div或其子元素 
					
						}); 
							
						
				//点击选择子类的时候框消失		
				$("#show li").click(function(){
					$("#show").css('display','none');
					$('#tes').hide();//遮罩消失
				})		
						
					
			})//整个事件结束

	</script>
</body>
</html>